<template>
  <div class="video-player">
    <video
      style="width: 100%; height: 340px"
      ref="videoPlayer"
      :src="videoSrc"
      controls
    ></video>
  </div>
</template>
<script setup>
const props = defineProps({
  videoSrc: {
    type: String,
    required: true,
  },
});
watch(
  () => props.videoSrc,
  (newVal) => {
    if (videoPlayer.value && newVal) {
      videoPlayer.value.src = newVal;
    }
  }
);
const videoPlayer = ref(null);
</script>
